<template>
	<view class="circle-info-page">
		<!-- 自定义头部 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">帖子详情</text>
					</view>
					<view class="header-right">
						<view class="share-btn" @click="sharePost">
							<text class="share-icon">📤</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 帖子详情卡片 -->
			<view class="post-detail-card" v-if="circleInfo._id">
				<!-- 用户信息头部 -->
				<view class="post-header">
					<view class="user-info" @click="goToUserProfile(circleInfo.author)">
						<view class="avatar-container">
							<image :src="circleInfo.author.avatar || config.commonUrl + '/avt.png'" class="user-avatar"
								mode="aspectFill" />
							<view class="user-badge" v-if="circleInfo.author.isCertified">
								<text class="badge-icon">✓</text>
							</view>
						</view>
						<view class="user-details">
							<text class="user-name">{{circleInfo.author.nickname || '未知用户'}}</text>
							<view class="post-meta">
								<text class="post-time">{{ formatDate(circleInfo.createdAt) }}</text>
								<text class="post-location"
									v-if="circleInfo.author.community && circleInfo.author.community.name">
									<text class="location-icon">📍</text>
									{{circleInfo.author.community.name}}
								</text>
							</view>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="post-actions">
						<view class="action-btn" v-if="!isShow" @click="connect">
							<text class="action-icon">💬</text>
							<text class="action-text">私信</text>
						</view>
						<view class="action-dropdown" v-else>
							<view class="action-btn" @click="showActionMenu">
								<text class="action-icon">⋯</text>
							</view>
							<view class="dropdown-menu" v-if="showMenu">
								<view class="menu-item" @click="editItem">
									<text class="menu-icon">✏️</text>
									<text class="menu-text">编辑</text>
								</view>
								<view class="menu-item delete" @click="deleteItem">
									<text class="menu-icon">🗑️</text>
									<text class="menu-text">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 帖子内容 -->
				<view class="post-content">
					<!-- 标题 -->
					<view class="post-title" v-if="circleInfo.title">
						<text class="title-text">{{circleInfo.title || ''}}</text>
					</view>

					<!-- 正文 -->
					<view class="post-text" v-if="circleInfo.content">
						<text class="text-content">{{circleInfo.content || ''}}</text>
					</view>

					<!-- 图片网格 -->
					<view class="image-grid" v-if="circleInfo.images && circleInfo.images.length > 0"
						:class="{'single': circleInfo.images.length === 1, 'double': circleInfo.images.length === 2, 'triple': circleInfo.images.length === 3, 'multiple': circleInfo.images.length > 3}">
						<view class="image-item" v-for="(image, imgIndex) in circleInfo.images" :key="imgIndex"
							@click="previewImage(circleInfo.images, imgIndex)">
							<image :src="image" mode="aspectFill" class="grid-image" />
							<view class="image-overlay">
								<text class="overlay-text">点击查看</text>
							</view>
						</view>
					</view>

					<!-- 闲置信息 -->
					<view class="idle-info" v-if="circleInfo.idleInfo && circleInfo.idleInfo.condition">
						<view class="info-header">
							<text class="info-title">闲置物品信息</text>
						</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">新旧程度</text>
								<text class="info-value">{{circleInfo.idleInfo.condition || '未知'}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">原价</text>
								<text
									class="info-value original-price">¥{{circleInfo.idleInfo.originalPrice || '0'}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">现价</text>
								<text class="info-value current-price">¥{{circleInfo.idleInfo.price || '0'}}</text>
							</view>
						</view>
					</view>

					<!-- 失物招领信息 -->
					<view class="lost-found-info" v-if="circleInfo.lostFoundInfo && circleInfo.lostFoundInfo.type">
						<view class="info-header">
							<text
								class="info-title">{{circleInfo.lostFoundInfo.type === 'lost' ? '失物信息' : '招领信息'}}</text>
						</view>
						<view class="info-list">
							<view class="info-row" v-if="circleInfo.lostFoundInfo.location">
								<text class="info-label">地点</text>
								<text class="info-value">{{circleInfo.lostFoundInfo.location || '未知'}}</text>
							</view>
							<view class="info-row" v-if="circleInfo.lostFoundInfo.time">
								<text class="info-label">时间</text>
								<text class="info-value">{{formatLostFoundTime(circleInfo.lostFoundInfo.time)}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 帖子底部 -->
				<view class="post-footer">
					<view class="post-tags">
						<view class="type-tag"
							:class="circleInfo.type === '邻里日常' ? 'type-daily' : circleInfo.type === '失物招领' ? 'type-lost' : 'type-idle'">
							<text
								class="tag-icon">{{ circleInfo.type === '邻里日常' ? '🏠' : circleInfo.type === '失物招领' ? '🔍' : '🛍️' }}</text>
							<text class="tag-text">{{circleInfo.type || '邻里日常'}}</text>
						</view>
					</view>

					<view class="post-stats">
						<view class="stat-item">
							<text class="stat-icon">👁️</text>
							<text class="stat-count">{{circleInfo.viewCount || 0}}</text>
						</view>
						<view class="stat-item" @click="likeCircle">
							<text class="stat-icon" :class="{'liked': circleInfo.isLiked}">❤️</text>
							<text class="stat-count">{{circleInfo.likeCount || 0}}</text>
						</view>
						<view class="stat-item" @click="focusComment">
							<text class="stat-icon">💬</text>
							<text class="stat-count">{{circleInfo.commentCount || 0}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 评论区域 -->
			<view class="comments-section">
				<view class="section-header">
					<text class="section-title">评论 ({{commentList.length || 0}})</text>
				</view>

				<!-- 评论列表 -->
				<view class="comment-list" v-if="commentList.length > 0">
					<view class="comment-item" v-for="comment in commentList" :key="comment._id">
						<view class="comment-avatar">
							<image :src="comment.author.avatar || config.commonUrl + '/avt.png'" class="avatar-image"
								mode="aspectFill" />
						</view>
						<view class="comment-content">
							<view class="comment-header">
								<view class="comment-info">
									<text class="comment-author">{{comment.author.nickname || '未知用户'}}</text>
									<text class="comment-time">{{ formatDate(comment.createdAt) }}</text>
								</view>
								<!-- 删除按钮 - 帖子作者可以删除任一评论，评论发布者可以删除自己的评论 -->
								<view class="comment-delete-btn"
									:class="{'post-author': isShow && comment.author._id !== userInfo._id, 'comment-author': comment.author._id === userInfo._id}"
									v-if="isShow || comment.author._id === userInfo._id" @click="deleteComment(comment)"
									:title="comment.author._id === userInfo._id ? '删除我的评论' : '删除此评论'">
									<text class="delete-icon">🗑️</text>
								</view>
							</view>
							<view class="comment-text">
								<text class="text-content">{{comment.content || ''}}</text>
							</view>
							<view class="comment-actions">
								<view class="action-item" @click="likeComment(comment)">
									<text class="action-icon" :class="{'liked': comment.isLiked}">❤️</text>
									<text class="action-text">{{comment.likeCount || 0}}</text>
								</view>
								<view class="action-item" @click="replyComment(comment)">
									<text class="action-icon">💬</text>
									<text class="action-text">回复</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 空评论状态 -->
				<view class="empty-comments" v-else>
					<view class="empty-content">
						<text class="empty-icon">💬</text>
						<text class="empty-text">暂无评论，快来抢沙发吧！</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论输入框 -->
		<view class="comment-input-section">
			<view class="input-container">
				<input class="comment-input" v-model="commentText" placeholder="说点什么..." :focus="focusCommentInput"
					@blur="focusCommentInput = false" />
        <view class="send-btn" :class="{'active': commentText.trim(), 'disabled': commentSubmitting}" @click="sendComment">
            <text class="send-text" :class="{'sending': commentSubmitting}">{{ commentSubmitting ? '发送中...' : '发送' }}</text>
        </view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" type="error" title="确认删除?" confirmText="确认" cancelText="取消"
				@confirm="confirmDelete" />
		</uni-popup>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import config from '@/config/config';
	import storage from "@/utils/storage.js";
	import {
		getCircleInfo,
		deleteCircle,
		likeCircleInfo as likeCircleApi,
		getComments,
		addComment,
		likeComment as likeCommentApi,
		deleteComment as deleteCommentApi
	} from '@/api/circle.js'

	export default {
		components: {
			headerSlot
		},
		data() {
			return {
				config,
				circleInfo: {},
				commentList: [],
				commentText: '',
				focusCommentInput: false,
				showMenu: false,
				userInfo: {},
				circleId: '',
                replyToCommentId: null, // 被回复的评论ID
                commentSubmitting: false
			};
		},
		computed: {
			isShow() {
				return this.circleInfo.author && this.circleInfo.author._id === this.userInfo._id
			}
		},
		onLoad(options) {
			this.userInfo = storage.getUserInfo()
			this.circleId = options.id
			this.focusCommentInput = options.focus === 'comment'
			this.initData()
		},
		methods: {
			initData() {
				this.getCircleDetail()
				this.getCommentList()
			},
			getCircleDetail() {
				uni.showLoading({
					title: "加载中..."
				})
				getCircleInfo(this.circleId).then(res => {
					this.circleInfo = res.data.data
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
					uni.showToast({
						title: "加载失败",
						icon: "none"
					})
				})
			},
			getCommentList() {
				getComments(this.circleId).then(res => {
					this.commentList = res.data.data || []
				})
			},
			likeCircle() {
				likeCircleApi(this.circleInfo._id).then(res => {
					this.circleInfo.isLiked = !this.circleInfo.isLiked
					this.circleInfo.likeCount = this.circleInfo.isLiked ?
						(this.circleInfo.likeCount || 0) + 1 :
						(this.circleInfo.likeCount || 1) - 1
				})
			},
			likeComment(comment) {
				likeCommentApi(comment._id).then(res => {
					comment.isLiked = !comment.isLiked
					comment.likeCount = comment.isLiked ?
						(comment.likeCount || 0) + 1 :
						(comment.likeCount || 1) - 1
				})
			},
            sendComment() {
                if (!this.commentText.trim() || this.commentSubmitting) return

				const commentData = {
					postId: this.circleId,
					content: this.commentText.trim()
				}

				// 如果是回复评论，添加parent字段
				if (this.replyToCommentId) {
					commentData.parent = this.replyToCommentId
				}

                this.commentSubmitting = true
                uni.showLoading({
                    title: '发送中...',
                    mask: true
                })

                addComment(commentData).then(res => {
                    this.commentText = ''
                    this.replyToCommentId = null // 清除被回复的评论ID
                    this.getCommentList()
                    this.circleInfo.commentCount = (this.circleInfo.commentCount || 0) + 1
                    uni.showToast({
                        title: "评论成功",
                        icon: "success"
                    })
                }).catch(() => {
                    uni.showToast({
                        title: '发送失败，请重试',
                        icon: 'none'
                    })
                }).finally(() => {
                    this.commentSubmitting = false
                    uni.hideLoading()
                })
			},
			replyComment(comment) {
				this.commentText = `@${comment.author.nickname} `
				this.replyToCommentId = comment._id // 设置被回复的评论ID
				this.focusCommentInput = true
			},
			focusComment() {
				this.focusCommentInput = true
				// 如果直接点击评论框，清除回复状态
				if (!this.replyToCommentId) {
					this.commentText = ''
				}
			},
			previewImage(images, current) {
				// 确保图片URL是完整的
				const fullUrls = images.map(img => {
					if (img.startsWith('http')) {
						return img
					} else {
						return this.config.commonUrl + img
					}
				})

				uni.previewImage({
					urls: fullUrls,
					current: fullUrls[current] || fullUrls[0]
				})
			},
			showActionMenu() {
				this.showMenu = !this.showMenu
			},
			editItem() {
				this.showMenu = false
				this.$store.commit('setEditCircle', this.circleInfo)
				this.$router.smartNavigate({
					url: `/pages/circlePages/editCircle?type=${this.circleType(this.circleInfo.type)}`
				})
			},
			deleteItem() {
				this.showMenu = false
				this.$refs.popup.open()
			},
			confirmDelete() {
				deleteCircle(this.circleInfo._id).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: "success"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			connect() {
				// 跳转到聊天页面，传递作者信息
				if (this.circleInfo.author) {
					this.$router.smartNavigate({
						url: `/pages/homePages/messageInfo?name=${this.circleInfo.author.nickname || '未知用户'}&avatar=${this.circleInfo.author.avatar || ''}&userId=${this.circleInfo.author._id}`
					})
				} else {
					uni.showToast({
						title: "用户信息获取失败",
						icon: "none"
					})
				}
			},
			sharePost() {
				uni.showToast({
					title: "分享功能开发中",
					icon: "none"
				})
			},
			goToUserProfile(user) {
				uni.showToast({
					title: "用户主页开发中",
					icon: "none"
				})
			},
			closePage() {
				uni.navigateBack()
			},
			circleType(type) {
				const typeMap = {
					'邻里日常': 'A',
					'失物招领': 'B',
					'邻里闲置': 'C'
				}
				return typeMap[type] || 'A'
			},
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000)

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 24小时内
				if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`

				// 7天内
				if (diff < 604800) return `${Math.floor(diff / 86400)}天前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 其他
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			},
			// 格式化招领信息时间，格式：2025-07-24 11:04
			formatLostFoundTime(dateString) {
				if (!dateString) return '未知'

				const date = new Date(dateString)

				// 检查日期是否有效
				if (isNaN(date.getTime())) return '未知'

				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}`
			},
			deleteComment(comment) {
				// 判断删除权限
				const isPostAuthor = this.isShow; // 帖子作者
				const isCommentAuthor = comment.author._id === this.userInfo._id; // 评论作者

				let confirmMessage = '确定要删除这条评论吗？';
				if (isPostAuthor && !isCommentAuthor) {
					confirmMessage = '作为帖子作者，确定要删除这条评论吗？';
				} else if (isCommentAuthor) {
					confirmMessage = '确定要删除您的评论吗？';
				}

				uni.showModal({
					title: '确认删除',
					content: confirmMessage,
					confirmText: '删除',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							deleteCommentApi(comment._id).then(res => {
								uni.showToast({
									title: "删除成功",
									icon: "success"
								})
								this.getCommentList()
								// 更新帖子评论数量
								this.circleInfo.commentCount = Math.max(0, (this.circleInfo
									.commentCount || 1) - 1)
							}).catch(() => {
								uni.showToast({
									title: "删除失败",
									icon: "none"
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle-info-page {
		min-height: 100vh;
		background: #f8f9fa;
		padding-bottom: 120rpx;
	}

	.header-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f0f0f0;
				border-radius: 50%;

				.back-icon {
					font-size: 32rpx;
					color: #666;
				}
			}
		}

		.header-center {
			.page-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #2C2622;
			}
		}

		.header-right {
			.share-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f0f0f0;
				border-radius: 50%;

				.share-icon {
					font-size: 28rpx;
				}
			}
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.post-detail-card {
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	.post-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.user-info {
			display: flex;
			align-items: center;
			flex: 1;

			.avatar-container {
				position: relative;
				margin-right: 24rpx;

				.user-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 3rpx solid #fff;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				}

				.user-badge {
					position: absolute;
					bottom: -2rpx;
					right: -2rpx;
					width: 28rpx;
					height: 28rpx;
					background: #52c41a;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #fff;

					.badge-icon {
						color: #fff;
						font-size: 16rpx;
						font-weight: bold;
					}
				}
			}

			.user-details {
				flex: 1;

				.user-name {
					display: block;
					font-size: 32rpx;
					font-weight: 600;
					color: #2C2622;
					margin-bottom: 8rpx;
				}

				.post-meta {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 16rpx;

					.post-time {
						font-size: 24rpx;
						color: #8F97A2;
					}

					.post-location {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #8F97A2;

						.location-icon {
							margin-right: 4rpx;
						}
					}
				}
			}
		}

		.post-actions {
			position: relative;

			.action-btn {
				display: flex;
				align-items: center;
				padding: 16rpx 24rpx;
				background: #FE6100;
				border-radius: 24rpx;
				gap: 8rpx;

				.action-icon {
					font-size: 24rpx;
				}

				.action-text {
					font-size: 26rpx;
					color: #fff;
					font-weight: 500;
				}
			}

			.action-dropdown {
				.action-btn {
					background: #f8f9fa;

					.action-icon {
						font-size: 32rpx;
						color: #666;
						transform: rotate(90deg);
					}
				}

				.dropdown-menu {
					position: absolute;
					top: 100%;
					right: 0;
					background: #fff;
					border-radius: 16rpx;
					box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
					padding: 16rpx 0;
					min-width: 160rpx;
					z-index: 100;

					.menu-item {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						padding: 20rpx 24rpx;
						transition: background 0.2s ease;
						white-space: nowrap;

						&:active {
							background: #f8f9fa;
						}

						&.delete {
							color: #ff4d4f;
						}

						.menu-icon {
							margin-right: 12rpx;
							font-size: 24rpx;
							flex-shrink: 0;
						}

						.menu-text {
							font-size: 26rpx;
							color: inherit;
							line-height: 1;
						}
					}
				}
			}
		}
	}

	.post-content {
		padding: 32rpx;

		.post-title {
			margin-bottom: 24rpx;

			.title-text {
				font-size: 36rpx;
				font-weight: 600;
				color: #2C2622;
				line-height: 1.4;
			}
		}

		.post-text {
			margin-bottom: 24rpx;

			.text-content {
				font-size: 30rpx;
				color: #2C2622;
				line-height: 1.6;
			}
		}

		.image-grid {
			display: grid;
			gap: 8rpx;
			margin-bottom: 24rpx;

			&.single {
				grid-template-columns: 1fr;
				max-width: 300rpx;
			}

			&.double {
				grid-template-columns: 1fr 1fr;
			}

			&.triple {
				grid-template-columns: repeat(3, 1fr);
			}

			&.multiple {
				grid-template-columns: repeat(3, 1fr);
			}

			.image-item {
				position: relative;
				border-radius: 16rpx;
				overflow: hidden;
				aspect-ratio: 1;

				.grid-image {
					width: 100%;
					height: 100%;
				}

				.image-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: opacity 0.3s ease;

					.overlay-text {
						color: #fff;
						font-size: 24rpx;
						background: rgba(0, 0, 0, 0.7);
						padding: 12rpx 24rpx;
						border-radius: 20rpx;
					}
				}

				&:active .image-overlay {
					opacity: 1;
				}
			}
		}

		.idle-info,
		.lost-found-info {
			background: #f8f9fa;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;

			.info-header {
				margin-bottom: 16rpx;

				.info-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #2C2622;
				}
			}

			.info-grid {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 16rpx;

				.info-item {
					text-align: center;

					.info-label {
						display: block;
						font-size: 24rpx;
						color: #8F97A2;
						margin-bottom: 8rpx;
					}

					.info-value {
						display: block;
						font-size: 28rpx;
						font-weight: 600;
						color: #2C2622;

						&.original-price {
							color: #8F97A2;
							text-decoration: line-through;
						}

						&.current-price {
							color: #ff4d4f;
						}
					}
				}
			}

			.info-list {
				.info-row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 12rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.info-label {
						font-size: 26rpx;
						color: #8F97A2;
					}

					.info-value {
						font-size: 26rpx;
						color: #2C2622;
						font-weight: 500;
					}
				}
			}
		}
	}

	.post-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		border-top: 1rpx solid #f0f0f0;

		.post-tags {
			.type-tag {
				display: inline-flex;
				align-items: center;
				padding: 12rpx 20rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 500;

				&.type-daily {
					background: #e6f7ff;
					color: #1890ff;
				}

				&.type-lost {
					background: #fff7e6;
					color: #fa8c16;
				}

				&.type-idle {
					background: #f6ffed;
					color: #52c41a;
				}

				&.type-default {
					background: #f0f0f0;
					color: #666;
				}

				.tag-icon {
					margin-right: 8rpx;
					font-size: 20rpx;
				}

				.tag-text {
					font-size: 24rpx;
				}
			}
		}

		.post-stats {
			display: flex;
			align-items: center;
			gap: 32rpx;

			.stat-item {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.stat-icon {
					font-size: 28rpx;
					transition: all 0.3s ease;

					&.liked {
						transform: scale(1.2);
					}
				}

				.stat-count {
					font-size: 26rpx;
					color: #8F97A2;
				}
			}
		}
	}

	.comments-section {
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.section-header {
			margin-bottom: 32rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #2C2622;
			}
		}

		.comment-list {
			.comment-item {
				display: flex;
				margin-bottom: 32rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.comment-avatar {
					margin-right: 24rpx;

					.avatar-image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
					}
				}

				.comment-content {
					flex: 1;

					.comment-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 12rpx;

						.comment-info {
							display: flex;
							align-items: center;
							gap: 12rpx;
						}

						.comment-author {
							font-size: 28rpx;
							font-weight: 600;
							color: #2C2622;
						}

						.comment-time {
							font-size: 24rpx;
							color: #8F97A2;
						}

						.comment-delete-btn {
							padding: 8rpx 12rpx;
							border-radius: 12rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-shrink: 0;
							transition: all 0.2s ease;

							// 帖子作者删除他人评论的样式
							&.post-author {
								background: #fff2f0;
								border: 1rpx solid #ffccc7;

								&:active {
									background: #ff4d4f;
									border-color: #ff4d4f;

									.delete-icon {
										color: #fff;
									}
								}

								.delete-icon {
									font-size: 20rpx;
									color: #ff4d4f;
								}
							}

							// 评论作者删除自己评论的样式
							&.comment-author {
								background: #f6ffed;
								border: 1rpx solid #b7eb8f;

								&:active {
									background: #52c41a;
									border-color: #52c41a;

									.delete-icon {
										color: #fff;
									}
								}

								.delete-icon {
									font-size: 20rpx;
									color: #52c41a;
								}
							}
						}
					}

					.comment-text {
						margin-bottom: 16rpx;

						.text-content {
							font-size: 28rpx;
							color: #2C2622;
							line-height: 1.5;
						}
					}

					.comment-actions {
						display: flex;
						align-items: center;
						gap: 32rpx;

						.action-item {
							display: flex;
							align-items: center;
							gap: 8rpx;

							.action-icon {
								font-size: 24rpx;
								transition: all 0.3s ease;

								&.liked {
									transform: scale(1.2);
								}
							}

							.action-text {
								font-size: 24rpx;
								color: #8F97A2;
							}
						}
					}
				}
			}
		}

		.empty-comments {
			text-align: center;
			padding: 64rpx 0;

			.empty-content {
				.empty-icon {
					font-size: 80rpx;
					color: #c0c4cc;
					margin-bottom: 24rpx;
				}

				.empty-text {
					font-size: 28rpx;
					color: #8F97A2;
				}
			}
		}
	}

	.comment-input-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1rpx solid #f0f0f0;
		padding: 24rpx 32rpx;
		z-index: 100;

		.input-container {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.comment-input {
				flex: 1;
				height: 72rpx;
				padding: 0 24rpx;
				background: #f8f9fa;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #2C2622;
			}

			.send-btn {
				padding: 20rpx 32rpx;
				background: #f0f0f0;
				border-radius: 36rpx;
				transition: all 0.3s ease;

				&.active {
					background: #FE6100;

					.send-text {
						color: #fff !important;
					}
				}

				.send-text {
					font-size: 28rpx;
					color: #8F97A2;
					font-weight: 500;

					.active & {
						color: #fff;
					}
				}
			}
		}
	}
</style>